<!-- 宿舍评价 -->
<template>
  <div class="evaluate-container">
    <div class="release">
      <backgroundBox>
        <el-form
          v-if="props.roomNoId && props.DormitoryMembers"
          :model="form"
          ref="ruleFormRef"
          :rules="rules"
          label-width="auto"
        >
          <el-form-item label="宿舍评价" prop="evaluate">
            <el-input
              v-model="form.evaluate"
              style="width: 100%"
              :rows="2"
              type="textarea"
              placeholder="请输入评价"
            />
          </el-form-item>
          <el-form-item label="评分" prop="score">
            <el-input-number v-model="form.score" :min="40" :max="100" />
          </el-form-item>
          <el-form-item>
            <el-button class="but" type="primary" @click="onSubmit(ruleFormRef)"
              >发布评论</el-button
            >
          </el-form-item>
        </el-form>
        <Unavailable v-else title="请选择宿舍后进行评论或该宿舍未有人入住"></Unavailable>
      </backgroundBox>
    </div>
    <div class="evaluate" ref="evaluateRef">
      <div class="item" v-for="(item, index) in EvaluateDataRef" :key="index">
        <div
          class="title"
          :class="{
            excellent: item.fraction >= 90,
            good: item.fraction < 90 && item.fraction >= 60,
            difference: item.fraction < 60,
          }"
        >
          <div class="left">
            评价分数:<span>{{ item.fraction }}</span>
          </div>
          <div class="rigth">{{ item.performance }}</div>
        </div>
        <div class="content">
          <div class="comment">{{ item.comment }}</div>
          <div class="Reviewer_time">
            <div class="Reviewer">
              评论人:<span>{{ item.nickName }}</span>
            </div>
            <div class="time">
              {{ moment(item.time).format("YYYY-MM-DD HH:mm") }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="loading" v-if="isLoadingRef">
      <p>加载中...</p>
    </div>
    <div class="finish" v-if="isFinishRef"></div>
  </div>
</template>
<script setup>
import backgroundBox from "@/components/BackgroundBox/index.vue";
import { reactive, ref, watchEffect } from "vue";
import { getEvaluate, evaluate } from "@/api/comment.js";
import Unavailable from "@/components/Unavailable/index.vue";
import { useUserStore } from "@/store/useUserStore.js";
import { storeToRefs } from "pinia";
import moment from "moment";
const { readUserInfo } = storeToRefs(useUserStore());
const EvaluateDataRef = ref([]);
const EvaluateTotalRef = ref(1);
const evaluateRef = ref(); // 评论的dom元素
const props = defineProps({
  roomNoId: {
    type: Number,
  },
  routerDom: {
    type: Object,
  },
  DormitoryMembers:{
    type: Number
  }
});
const pageRef = ref(1); // 当前页码
const isLoadingRef = ref(false);
const isFinishRef = ref(false);
// 监听滚动事件
watchEffect(() => {
  if (!props.routerDom || !props.roomNoId) {
    isLoadingRef.value = false;
    return;
  }
  if (EvaluateDataRef.value.length === EvaluateTotalRef.value) {
    isFinishRef.value = true;
  }

  props.routerDom.addEventListener("scroll", () => {
    if (
      Math.ceil(props.routerDom.scrollTop + props.routerDom.clientHeight) ===
      props.routerDom.scrollHeight
    ) {
      isLoadingRef.value = true;
      pageRef.value++;
    }
  });
});
// 获取评论
watchEffect(async () => {
  if (!props.roomNoId) return;
  const { data } = await getEvaluate({
    page: pageRef.value,
    roomNoId: props.roomNoId,
  });
  data.rows = data.rows.map((item) => {
    let performance = "";
    if (item.fraction >= 90) {
      performance = "优秀";
    } else if (item.fraction < 90 && item.fraction >= 60) {
      performance = "良好";
    } else {
      performance = "差劲";
    }
    return {
      ...item,
      performance,
    };
  });
  EvaluateDataRef.value.push(...data.rows);
  EvaluateTotalRef.value = data.total;
  isLoadingRef.value = false;
});
// 监听宿舍id
watchEffect(()=>{
  if(props.roomNoId){
    EvaluateDataRef.value = []
    EvaluateTotalRef.value = 1
  }

})
const ruleFormRef = ref();
const form = reactive({
  evaluate: "",
  score: 0,
});
const rules = reactive({
  evaluate: [{ required: true, message: "请输入评语", trigger: "blur" }],
  score: [{ required: true, message: "请输入评分", trigger: "blur" }],
});
// 发布评论
const onSubmit = async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid) => {
    if (valid) {
      const { data } = await evaluate({
        fraction: form.score,
        comment: form.evaluate,
        roomNoId: props.roomNoId,
      });
      if (data) {
        let performance = "";
        if (form.score >= 90) {
          performance = "优秀";
        } else if (form.score < 90 && form.score >= 60) {
          performance = "良好";
        } else {
          performance = "差劲";
        }
        EvaluateDataRef.value.unshift({
          fraction: form.score,
          performance,
          comment: form.evaluate,
          nickName: readUserInfo.value.Nickname,
          time: moment.utc(),
        });
        EvaluateTotalRef.value++;
        formEl.resetFields();
        ElMessage({
          message: "发布成功",
          type: "success",
        });
      }
    }
  });
};
</script>
<style lang="less" scoped>
@import "@/styles/var.less";
.evaluate-container {
  width: 100%;
  height: 100%;
  .release {
    .back-container {
      padding: 20px 30px;
      position: relative;
      min-height: 150px;
      .but {
        position: absolute;
        top: 0;
        left: 65px;
      }
    }
  }
  .evaluate {
    margin-top: 30px;
    margin-bottom: 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 20px;
    .item {
      overflow: hidden;
      border-radius: 5px;
      .title {
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        font-size: 1.2em;
        font-weight: bold;
        height: 50px;
        line-height: 50px;
        color: @white;
      }
      .content {
        background-color: @white;
        padding: 10px 20px;
        .comment {
          height: 150px;
          overflow: auto;
        }
        .Reviewer_time {
          display: flex;
          justify-content: space-between;
          font-size: 0.9em;
          height: 40px;
          line-height: 40px;
          color: @gray;
        }
      }
    }
  }
  .loading {
    text-align: center;
    color: @Info;
    font-size: 1.2em;
    font-weight: bold;
  }
  .finish {
    height: 0px;
    border: 1px solid red;
    text-align: center;
    color: @Info;
    border: 1px dashed @Info;
    margin-bottom: 30px;
    position: relative;
    &::after {
      content: "无";
      position: absolute;
      left: 50%;
      top: -10px;
      padding: 0 10px;
      background-color: #e3e3e3;
    }
  }

  .excellent {
    background-color: @primary;
  }
  .good {
    background-color: @good;
  }
  .difference {
    background-color: @danger;
  }
}
</style>